<template>
	<view class="container">
		<back />
		<view class="header">
			{{ time }}
		</view>
		<view class="publishBox">
			<view class="publishLayout">
				<view class="iconsBox">
					<view class="item">
						<image
							class="happenicon"
							:src="addOption.happen"
							mode="scaleToFill"
							@click="changeIcon('happen')"
						/>
					</view>
					<image
						class="icon"
						:src="addOption.mood"
						mode="scaleToFill"
						@click="changeIcon('mood')"
					/>
					<image
						class="icon weather"
						:src="addOption.weather"
						mode="scaleToFill"
						@click="changeIcon('weather')"
					/>
				</view>
				<view class="inpLayout">
					<input
						:value="titleVal"
						type="text"
						class="input"
						placeholder="标题"
						@input="titleInput"
					/>
				</view>
				<view class="tareaLayout">
					<textarea
						:value="contentVal"
						type="text"
						class="textarea"
						placeholder="内容"
						@input="contentInput"
					/>
				</view>
				<!-- <view class="imgBox">
					<scroll-box
						:imgList="imgList"
					/>
				</view> -->
				<view
					class="complete"
					hover-class="hoverBtn"
					@click="completeCli"
				>
					发布
				</view>
			</view>
		</view>
		<pop
			:current_icon="current_icon"
			:pop_show="pop_show"
			:icon_type="icon_type"
			@change_pop_show="change_pop_show"
			@changeTypeIcon="changeTypeIcon"
		/>
	</view>
</template>

<script>
import { toast } from "@/common";
import dayjs from "dayjs";
import pop from "./pop.vue";
import { happenIcon, moodIcon, weatherIcon } from "@/config/journalIcon";
import { addJournalApi } from "@/servers/journalServer";
import { mapActions, mapState } from "vuex";
import Back from "@/pages_second/components/back/back.vue";
import ScrollBox from '../components/scrollBox/scrollBox.vue';
export default {
	components: { pop, Back, ScrollBox },
	data() {
		return {
			titleVal: "",
			contentVal: "",
			addOption: {
				happen: "/static/journal/happen/run.png",
				mood: "/static/journal/mood/zhuangkeai.png",
				weather: "/static/journal/weather/sunny.png",
			},
			time: "",
			pop_show: false, // 弹框
			icon_type: "", // 选择icon的类型
			current_icon: "", // 当前icon
			imgList: [], // 上传图片
		};
	},
	computed: {
		...mapState("userStore", ["userInfo"]),
	},
	methods: {
		...mapActions("journalStore", ["getjournalListAction"]),
		pushImgList(path){
            this.imgList.push({ path });
        },
		titleInput(e) {
			this.titleVal = e.detail.value;
		},
		contentInput(e) {
			this.contentVal = e.detail.value;
		},
		async completeCli() {
			if (!this.titleVal || !this.contentVal) {
				toast({ title: "标题和内容不能为空~", icon: "none" });
				return;
			}
			//  深拷贝一层对象 用...
			let iconIdOption = { ...this.addOption };
			let allIcon = [...weatherIcon, ...happenIcon, ...moodIcon];
			let iconMap = new Map();
			allIcon.forEach(item => {
				iconMap.set(item.path, item);
			});
			for (let key in iconIdOption) {
				const res = iconMap.get(iconIdOption[key]).id;
				iconIdOption[key] = res;
			}
			const option = {
				title: this.titleVal,
				content: this.contentVal,
				user_id: this.userInfo.id,
				plan_status: 0,
				...iconIdOption,
			};
			const res = await addJournalApi(option);
			if (res.code === 0) {
				toast({ title: "添加日记成功~" });
				setTimeout(() => {
					this.getjournalListAction();
					uni.navigateBack({});
				}, 800);
			}
		},
		change_pop_show() {
			this.pop_show = !this.pop_show;
		},
		changeTypeIcon(path, type) {
			switch (type) {
				case "happen":
					this.current_icon = path;
					this.addOption.happen = path;
					break;
				case "mood":
					this.current_icon = path;
					this.addOption.mood = path;
					break;
				case "weather":
					this.current_icon = path;
					this.addOption.weather = path;
					break;
			}
			this.change_pop_show();
		},
		changeIcon(type) {
			switch (type) {
				case "weather":
					this.current_icon = this.addOption.weather;
					this.icon_type = "weather_icon";
					break;
				case "mood":
					this.current_icon = this.addOption.mood;
					this.icon_type = "mood_icon";
					break;
				case "happen":
					this.current_icon = this.addOption.happen;
					this.icon_type = "happen_icon";
					break;
			}
			this.change_pop_show();
		},
	},
	created() {
		this.time = dayjs(new Date()).format("YYYY.MM.DD   HH:mm:ss");
	},
	watch: {},
};
</script>

<style lang="scss" scoped>
.container{
	padding: 48rpx;
}
.header {
    padding-top: 120rpx;
    font-size: 36rpx;
    font-weight: 500;
    border-bottom: 2rpx #ccc solid;
    position: relative;
    padding-bottom: 16rpx;

	.icon {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 200rpx;
		right: 120rpx;
		animation: a2 2s linear infinite;
		@keyframes a2 {
			0% {
				transform: scale(0.8);
			}
			50% {
				transform: scale(1.2);
			}
			100% {
				transform: scale(0.8);
			}
		}
	}
}

.publishBox {
	padding-top: 100rpx;
	.publishLayout {
		border-radius: 24rpx;
		.iconsBox {
			padding-bottom: 48rpx;
			position: relative;
			.item {
				text-align: center;
				.happenicon {
					width: 33vw;
					height: 33vw;
				}
			}
			.weather{
				right: 72rpx !important;
			}
			.icon {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 28vw;
				right: 0;
				animation: a 2s linear infinite;
				@keyframes a {
					0% {
						transform: rotate(0reg);
					}
					25% {
						transform: rotate(20deg);
					}
					50% {
						transform: rotate(0deg);
					}
					75% {
						transform: rotate(-20deg);
					}
					100% {
						transform: rotate(0deg);
					}
				}
			}
		}

		.inpLayout {
			margin-bottom: 36rpx;
		}

		.label {
			font-size: 34rpx;
			font-weight: bolder;
			padding-left: 8rpx;
		}
		.input {
			height: 88rpx;
			line-height: 88rpx;
			border: 2rpx #f3f5f5 solid;
			padding: 0 16rpx;
			margin-top: 16rpx;
			border-radius: 12rpx;
		}

		.textarea {
			border: 2rpx #f3f5f5 solid;
			width: 100%;
			border-radius: 12rpx;
			padding: 16rpx;
			box-sizing: border-box;
			margin-top: 16rpx;
		}
		.complete {
			background: #212121;
			color: #fff;
			margin-top: 30rpx;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 24rpx 0;
			font-size: 32rpx;
			font-weight: 600;
			.icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 8rpx;
			}
		}
	}
}
</style>
<style>
/* page {
	background-color: #f3f5f6;
} */
</style>
